<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :lock-scroll="true"
    :close-on-click-modal="false"
    :close-on-press-escape="true"
    width="80%"
  >
    <div v-if="value!=null">
      <h-order-display v-model="datas" :admin="true"/>
      <div class="h-form">
        <div class="form-label">
          <span class="red">*</span> 运费:￥
        </div>
        <div class="form-content">
          <el-input-number :min="0" :step="0.01" v-model="cost" ></el-input-number>
          <span style="margin-left: 20px;color: #909399"> 请输入需要补的运费，以人民币单位</span>
        </div>
      </div>
    </div>
    <div v-if="value!=null" slot="footer">
      <el-button type="primary" @click="freightConst" :loading="loading"><i class="fa fa-plus"></i> 添加补运费单</el-button>
      <el-button type="success" @click="closed"><i class="fa fa-sign-out"></i> 关闭</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import Dialog from 'src/components/common/js/dialog-mix'
  import AdminService from 'src/service/admin'
  import HOrderDisplay from 'src/components/common/display/HOrderDisplay'

  export default {
    name: 'HFreightPayDialog',
    mixins: [Dialog],
    components: {
      HOrderDisplay
    },
    data() {
      return {
        datas: [],
        cost: 0,
        loading: false
      }
    },
    watch: {
      value: function (c, d) {
        this.datas = [c]
        this.cost = 0
      }
    },
    props: {
      value: {
        type: Object,
        default: null
      }
    },
    methods: {
      freightConst: function () {
        const me = this
        me.loading = true
        if (me.cost < 0) {
          me.$message.error('运费不能小于0。')
        } else {
          AdminService.makeUpOrder({
            ids: [me.value.id],
            freight: me.cost
          }).then(ds => {
            if (ds != null) {
              me.$emit('success', ds.datas)
            }
            me.loading = false
          })
        }
      }
    }
  }
</script>
